<template>
  <van-config-provider :theme-vars="themeVars">
    <slot></slot>
  </van-config-provider>
</template>

<script setup lang="ts">
import { computed, unref } from 'vue';
import { useAppStore } from '@/store'

//拿到store的全局数据
const appStore = useAppStore()
const theme = computed(() => appStore.getTheme)
const themeVars = computed(() => {
  return {
    black: unref(theme).colors.black,
    white: unref(theme).colors.white,
    // Tabs
    'tabs-default-color': unref(theme).brandColor,
    'tabs-bottom-bar-color': unref(theme).brandColor,
    // Sidebar
    'sidebar-selected-border-color': unref(theme).brandColor,
    // Dialog
    'dialog-confirm-button-text-color': unref(theme).brandColor,
    // ActionBar
    'action-bar-button-warning-color': unref(theme).viceColor,
    'action-bar-button-danger-color': unref(theme).brandColor,
  }
})
</script>

<style scoped>

</style>